<template>
<div class="page-container">
    <div class="page-header">
        <div class="header-row" >
            <div><a class="logo" href="/#/">珞布笔记</a></div>
            <div style="margin:12px 90px;">
                <form method="get" action="/#/search">
                    <div class="input-inline">
                        <input style="border-radius: 15px;" class="search-input" placeholder="搜索文档" name="q"/>
                        <button type="submit" style="position: absolute;top:12px;right: 8px;border: none;background-color: white;">
                            <i class="el-icon-search" ></i>
                        </button>
                    </div>
                </form>
            </div>
            <div class="header-col">
                <el-dropdown @command="executeCommand">
                    <span>
                    <i class = "el-icon-circle-plus-outline"></i>
                    管理
                    <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="createArchiveCommand">新建文集</el-dropdown-item>
                        <!--<el-dropdown-item :command="renameArchiveCommand">重命名文集</el-dropdown-item>-->
                        <el-dropdown-item :command="deleteArchiveCommand">删除文集</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="header-col">
                <el-dropdown @command="executeCommand">
                    <span>
                    {{user.name}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="logout">登出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
    <div class="docs-filter"><el-row><el-col></el-col></el-row></div>
    <el-main class="page-main">    
        <!-- <doc-list :docs="docList"></doc-list> -->
        <!-- <archive-list :archives="archiveList"></archive-list> -->
        <div class="docs-filter" v-if="selectionMode" >
        <el-card style="width:500px; height:50px;">
            <div class="select-stat-row counter-margin">
                <div class="select-stat-row">
                    <el-button @click="cancelDeleteArchives" class="select-stat-col" type="text"><i class="el-icon-close select-stat-icon"></i></el-button>
                    <div style="margin:20px;">{{selectedArchiveIds.length}}项已选择</div>
                </div>
                <div class="select-stat-row">
                    <el-checkbox v-model="selectedAllArchives" @change="selectAllArchives" style="margin:20px;">全选</el-checkbox>
                    <el-button @click="deleteArchives" class="select-stat-col" type="text"><i class="el-icon-delete select-stat-icon"></i></el-button>
                </div>
            </div>
        </el-card>
        </div>
        <el-row>
            <el-checkbox-group v-model="selectedArchiveIds">
            <el-col :span="8" class="archive-item" v-for="archive in archives" :key="archive.archiveId">
                <el-checkbox :label="archive.archiveId" style="float:left; margin:75px 0px;" v-if="selectionMode" @change="selectArchives"><br></el-checkbox>
                <el-card @click.native="selectArchive(archive.archiveId)" class="archive-item-container" shadow="hover" >
                    <div slot="header" class="archive-item-header">
                        <a :href="`/#/archive/${archive.archiveId}`" style="text-decoration: none;">
                            <span class="archive-title">
                                    {{ archive.archiveName }}
                            </span>
                        </a>
                        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                    </div>
                    <div class="archive-item-body">
                        <!-- <div class="doc-name">
                        {{item.description}}
                    </div> -->
                        <p v-for="doc in archive.documents.slice(0, 4)" :key="doc.docId" class="doc-title">
                            <a :href="`/#/archive/${archive.archiveId}/doc/${doc.docId}`" style="text-decoration: none;">
                                <span class="doc-title-text">{{ doc.docName }}</span>
                            </a>
                        </p>
                    </div>
                </el-card>
            </el-col>
            </el-checkbox-group>
        </el-row>
    </el-main>
    <footer-view></footer-view>
</div>
</template>

<script>
// import ArchiveList from '../layout/archive-list.vue';
import axios from 'axios';
import FooterView from '../layout/footer.vue';
export default {
    name: 'home-page',
    components: {
    // ArchiveList,
    FooterView
},
    methods: {
        /*getList() {
            this.$axios.get('http://localhost:8001/archive/getUserArchive', {params:{
                userId:this.userId
            }}).then(res=>{
                console.log('获得文集数据为：');
                console.log(res.data);
                this.archives = res.data;
                console.log('每个文集为：');
                for(var archive of this.archives){
                    console.log(archive);
                    this.$axios.get('http://localhost:8001/archive/searchArchive', {params: {
                        archiveId: archive.archiveId
                    }}).then(res => {
                        this.$set(archive, 'documents', res.data)
                    }).catch(err => {
                        console.log(err);
                        this.$message({
                            type: 'error',
                            message: "加载失败"
                        });
                    });
                }
                console.log('文集数据为：');
                console.log(this.archives);
            }).catch(err => {
                console.log(err);  
                this.$message({
                    type: 'error',
                    message: "加载失败"
                });
            });
        },*/
        getList() {
            this.$axios.get('http://localhost:8001/archive/getUserArchive', {params:{
                userId:this.userId
            }}).then(res=>{
                console.log('获得文集数据为：');
                console.log(res.data);
                this.archives = res.data;
                console.log('每个文集为：');
                for(let archive of this.archives){
                    console.log(archive);
                    this.$axios.get('http://localhost:8001/archive/searchArchive', {params: {
                        archiveId: archive.archiveId
                    }}).then(res => {
                        this.$set(archive, 'documents', res.data);
                        console.log('修改后：');
                        console.log(archive);
                    }).catch(err => {
                        console.log(err);
                        this.$message({
                            type: 'error',
                            message: "加载失败"
                        });
                    });
                }
                console.log('文集数据为：');
                console.log(this.archives);
            }).catch(err => {
                console.log(err);  
                this.$message({
                    type: 'error',
                    message: "加载失败"
                });
            });
        },
        executeCommand(command) {
            command();
        },
        createArchiveCommand() {
            console.log("创建新文集");
            this.$prompt('请输入新文集标题', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                // inputErrorMessage: '格式不正确'
                }).then(({ value }) => {
                    this.$axios.post('http://localhost:8001/archive/newArchive', {
                        userId: this.userId,
                        archiveName: value,
                        documentDtos: []
                    }).then(()=>{
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: "创建成功"
                        });
                    }).catch(err => {
                        this.getList();
                        console.log(err);
                        this.$message({
                            type: 'error',
                            message: "创建成功"
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });       
            });
        },
        renameArchiveCommand() {
            this.$message({
                type: 'warning',
                message: '尚未实现'
            });
            console.log(this.archives);
        },
        deleteArchiveCommand() {
            this.selectionMode = true
            this.selectedArchiveIds = []
        },
        deleteArchives() {
            axios.all(this.selectedArchiveIds.map(id => axios.delete('http://localhost:8001/archive/deleteArchive?archiveId='+id)))
            .then(axios.spread(() => {
                this.getList();
                this.$message({
                    type: 'success',
                    message: "删除成功"
                });
            })).catch(err => {
                console.log(err);
                this.$message({
                    type: 'error',
                    message: "删除出错"
                });
            })
            this.selectionMode = false
            this.selectedArchiveIds = []
        },
        cancelDeleteArchives() {
            this.selectionMode = false
            this.selectedArchiveIds = []
        },
        selectArchive(id) {
            console.log(id)
            if (this.selectionMode) {
                if (this.selectedArchiveIds.includes(id)) {
                    this.selectedArchiveIds = this.selectedArchiveIds.filter(archiveId => archiveId !== id)
                } else {
                    this.selectedArchiveIds.push(id)
                }
            } else {
                this.$router.push(`/archive/${id}`)
            }
        },
        selectArchives() {
            if (this.selectedArchiveIds.length === this.archives.length) {
                this.selectedAllArchives = true
            } else {
                this.selectedAllArchives = false
            }
        },
        selectAllArchives() {
            if (this.selectedArchiveIds.length === this.archives.length) {
                this.selectedArchiveIds = []
            } else {
                this.selectedArchiveIds = this.archives.map(archive => archive.archiveId)
            }
        },
        logout() {
            // this.$message({
            //     type: 'warning',
            //     message: '尚未实现'
            // });
            // this.$message({
            //     type: 'success',
            //     message: "登出成功"
            // })
            // this.$router.push('/#/login');

            console.log("logout");
            this.$router.push(this.$route.path.replace('home','login'));
        }
    },
    data() {
        return {
            docList: [
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁", link: "http://www.baidu.com"},   
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},
                {docName:"文档文档",docContent:"文档简洁简洁简介简洁简介简洁简介简介简洁简洁简洁简介简洁简介简洁简介简介简洁"},

            ],
            archives: [
                {archiveName:"文集1",archiveId:1,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集2",archiveId:2,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集3",archiveId:3,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集4",archiveId:4,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集5",archiveId:5,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集6",archiveId:6,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集7",archiveId:7,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集8",archiveId:8,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集9",archiveId:9,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
                {archiveName:"文集10",archiveId:10,documents:[{docId:1, docName:"文档1"},{docId:2, docName:"文档2"},{docId:3, docName:"文档3"},{docId:4, docName:"文档4"},{docId:5, docName:"文档5"},{docId:6, docName:"文档6"},{docId:7, docName:"文档7"},{docId:8, docName:"文档8"},{docId:9, docName:"文档9"},{docId:10, docName:"文档10"}]},
            ],
            selectionMode: false,
            selectedArchiveIds: [],
            selectedAllArchives: false,
            userId: 0,
            user: {
                name: "用户"
            },
            getListflag:true
        }
    },
    props:{
        // userId: {
        //     type: Number, // 指定类型为数字
        //     required: true,
        // },
    },  
    created(){
        //localStorage的存储应该发生在登录界面，由于登录界面的多种事宜未定，先放在这里
        //localStorage.setItem('userId','1');
        this.userId = parseInt(localStorage.getItem('userId'));
        console.log(this.userId);
    },
    mounted() {
        this.getList();
        this.selectionMode = false;
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.page-container {
    position: relative;
    margin: 0 36px;
    padding: 0 15px;
    box-sizing: border-box;
}

/* .page-main {
    margin-left: 30px;
    margin-right: 30px;
} */

.docs-filter {
    margin-top: 10px;
}

.page-header {
    /* background-color: #B3C0D1;
    color: #333; */
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    position: relative;
    margin: 0 auto;
    padding: 0 15px;
    z-index: 1000;
    height: 60px;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    left: 20px;
    top: 16px;
}

.header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header-col {
    line-height: 60px;
}

a {
    text-decoration: none;
    color: #333;
}

.el-dropdown {
    color: black;
    line-height: 0px;
}

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #F6F6F6;
    color: rgba(0,0,0,.8);
}

.input-inline {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.search-input {
    width: 300px;
    border-radius: 15px;
    display: block;
    /* width: 100%; */
    padding-left: 10px;
    height: 38px;
    line-height: 1.3;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    color: rgba(0,0,0,.85);
    border-radius: 2px;
    border-color: #eee;
    outline: 0;
    -webkit-appearance: none;
    transition: all .3s;
    -webkit-transition: all .3s;
    box-sizing: border-box;
}

input {
    font-family: inherit;
    /* font-size: inherit; */
    font-style: inherit;
    font-weight: inherit;
    outline: 0;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.el-button:focus, .el-button:hover {
    color: rgba(0,0,0,.8);
    border-color: #abacad;
    background-color: #F6F6F6;
    border: 0px;
}

.counter-margin {
    margin: -20px;
}

.select-stat-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}

.select-stat-col {
    min-width: 50px;
    height: 100%;
}

.select-stat-icon {
    font-size: 18px;
    color: #000;
}

.el-checkbox__inner {
    border-radius: 30px;
}

.archive-item {
    padding: 10px;
}

.archive-item-container {
    border: 1px solid #ddd;
    height: 170px;
}

.archive-item-header {
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    color: #333;
    border-radius: 2px 2px 0 0;
    font-size: 14px;
    margin: -20px;
}

.archive-item-body {
    margin: -5px -5px -5px -5px;
}

.archive-title {
    font-weight: 700;
    color: #333;
}
.doc-title {
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 24px;
    color: #999!important;
    padding-left: 5px!important;
    padding-right: 5px!important;
    margin: 0px;
}

.doc-title-text {
    text-overflow: ellipsis;
    color: #999!important;
    line-height: 18px;
}

</style>
